<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body center>

<style>
    body > .btn {margin: 10px;width: 200px;}
    pop-cont {padding: 50px;text-align: center;}
    pop-solve a:nth-child(1) {background-color: var(--red);}
    pop-solve a:nth-child(2) {background-color: var(--orange);}
    pop-solve button.btn {background-color: var(--green);}
    pop-solve a:nth-child(4) {background-color: var(--blue);}
</style>

<!----------------------------------------------------------------------------------------->

<a pop="a" class="btn">pop</a>
<a pop="b" class="btn">choice</a>
<a pop="c" class="btn">sider</a>

<!----------------------------------------------------------------------------------------->

<pop pop="a">
    <pop-main>
        <pop-title><h3>title</h3><span>describe</span><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
        <pop-solve>
            <a href="" class="btn">previous</a>
            <a href="" class="btn">cancel</a>
            <button class="btn">submit</button>
            <a href="" class="btn">confirm</a>
        </pop-solve>
    </pop-main>
</pop>

<!----------------------------------------------------------------------------------------->

<pop pop="b">
    <pop-choice>
        <pop-title><h3>title</h3><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
        <pop-solve>
            <a href="" class="btn">previous</a>
            <a href="" class="btn">cancel</a>
            <button class="btn">submit</button>
            <a href="" class="btn">confirm</a>
        </pop-solve>
    </pop-choice>
</pop>

<!----------------------------------------------------------------------------------------->

<pop pop="c" right>
    <pop-sider>
        <pop-title><h3>title</h3><a class="close"></a></pop-title>
        <pop-cont>article</pop-cont>
    </pop-sider>
</pop>

<!----------------------------------------------------------------------------------------->

</body>
</html>